/**
 * 版本对比组件
 * 对比原文和多个优化版本
 */

import React from 'react';
import { Card, Radio, Row, Col, Statistic, List, Space, Tag, Divider } from 'antd';
import {
  ArrowUpOutlined,
  ArrowDownOutlined,
  CheckCircleOutlined,
  TrophyOutlined,
} from '@ant-design/icons';
import type { OptimizedVersion, ComparisonData } from '@/stores/optimizer.store';
import './style.css';

interface VersionCompareProps {
  originalContent: string;
  versions: OptimizedVersion[];
  selectedVersionId: string | null;
  comparisonData: ComparisonData | null;
  onSelectVersion: (versionId: string) => void;
  onCompare: (versionId: string) => void;
}

/**
 * 获取版本类型标签
 */
const getVersionTypeTag = (type: OptimizedVersion['type']) => {
  const tagMap = {
    seo: { text: 'SEO优化', color: 'blue' },
    readability: { text: '可读性优化', color: 'green' },
    professional: { text: '专业深度', color: 'purple' },
    balanced: { text: '平衡优化', color: 'orange' },
  };

  const { text, color } = tagMap[type];
  return <Tag color={color}>{text}</Tag>;
};

/**
 * 获取评分颜色
 */
const getScoreColor = (score: number): string => {
  if (score >= 85) return '#52c41a';
  if (score >= 70) return '#faad14';
  return '#ff4d4f';
};

export const VersionCompare: React.FC<VersionCompareProps> = ({
  originalContent,
  versions,
  selectedVersionId,
  comparisonData,
  onSelectVersion,
  onCompare,
}) => {
  const selectedVersion = versions.find(v => v.id === selectedVersionId);

  return (
    <div className="version-compare">
      {/* 版本选择 */}
      <Card title="选择优化版本" size="small">
        <Radio.Group
          value={selectedVersionId}
          onChange={(e) => {
            onSelectVersion(e.target.value);
            onCompare(e.target.value);
          }}
          style={{ width: '100%' }}
        >
          <Space direction="vertical" style={{ width: '100%' }}>
            {versions.map((version) => (
              <Radio key={version.id} value={version.id} style={{ width: '100%' }}>
                <div className="version-radio-content">
                  <Space>
                    {getVersionTypeTag(version.type)}
                    <span className="version-title">{version.title}</span>
                    <Tag color={getScoreColor(version.score)}>
                      <TrophyOutlined /> {version.score.toFixed(1)}分
                    </Tag>
                  </Space>
                </div>
              </Radio>
            ))}
          </Space>
        </Radio.Group>
      </Card>

      {/* 对比数据 */}
      {comparisonData && selectedVersion && (
        <>
          {/* 评分对比 */}
          <Card title="评分对比" size="small" style={{ marginTop: 16 }}>
            <Row gutter={16}>
              <Col span={6}>
                <Statistic
                  title="综合评分"
                  value={comparisonData.optimized.score}
                  suffix={`/ ${comparisonData.original.score}`}
                  prefix={
                    <ArrowUpOutlined
                      style={{
                        color:
                          comparisonData.optimized.score > comparisonData.original.score
                            ? '#52c41a'
                            : '#ff4d4f',
                      }}
                    />
                  }
                  valueStyle={{
                    color:
                      comparisonData.optimized.score > comparisonData.original.score
                        ? '#52c41a'
                        : '#ff4d4f',
                  }}
                />
                <div className="score-diff">
                  {comparisonData.optimized.score > comparisonData.original.score ? '+' : ''}
                  {(comparisonData.optimized.score - comparisonData.original.score).toFixed(1)} 分
                </div>
              </Col>

              <Col span={6}>
                <Statistic
                  title="字数"
                  value={comparisonData.optimized.wordCount}
                  suffix={`/ ${comparisonData.original.wordCount}`}
                  valueStyle={{ fontSize: 20 }}
                />
                <div className="score-diff">
                  {comparisonData.optimized.wordCount > comparisonData.original.wordCount ? '+' : ''}
                  {comparisonData.optimized.wordCount - comparisonData.original.wordCount} 字
                </div>
              </Col>

              <Col span={6}>
                <Statistic
                  title="可读性"
                  value={comparisonData.optimized.readabilityScore}
                  suffix={`/ ${comparisonData.original.readabilityScore}`}
                  prefix={
                    comparisonData.optimized.readabilityScore >
                    comparisonData.original.readabilityScore ? (
                      <ArrowUpOutlined style={{ color: '#52c41a' }} />
                    ) : (
                      <ArrowDownOutlined style={{ color: '#ff4d4f' }} />
                    )
                  }
                  valueStyle={{
                    color:
                      comparisonData.optimized.readabilityScore >
                      comparisonData.original.readabilityScore
                        ? '#52c41a'
                        : '#ff4d4f',
                  }}
                />
                <div className="score-diff">
                  {comparisonData.optimized.readabilityScore >
                  comparisonData.original.readabilityScore
                    ? '+'
                    : ''}
                  {(
                    comparisonData.optimized.readabilityScore -
                    comparisonData.original.readabilityScore
                  ).toFixed(1)}{' '}
                  分
                </div>
              </Col>

              <Col span={6}>
                <Statistic
                  title="SEO评分"
                  value={comparisonData.optimized.seoScore}
                  suffix={`/ ${comparisonData.original.seoScore}`}
                  prefix={
                    comparisonData.optimized.seoScore > comparisonData.original.seoScore ? (
                      <ArrowUpOutlined style={{ color: '#52c41a' }} />
                    ) : (
                      <ArrowDownOutlined style={{ color: '#ff4d4f' }} />
                    )
                  }
                  valueStyle={{
                    color:
                      comparisonData.optimized.seoScore > comparisonData.original.seoScore
                        ? '#52c41a'
                        : '#ff4d4f',
                  }}
                />
                <div className="score-diff">
                  {comparisonData.optimized.seoScore > comparisonData.original.seoScore ? '+' : ''}
                  {(comparisonData.optimized.seoScore - comparisonData.original.seoScore).toFixed(
                    1
                  )}{' '}
                  分
                </div>
              </Col>
            </Row>
          </Card>

          {/* 改进项 */}
          {comparisonData.improvements.length > 0 && (
            <Card title="改进项" size="small" style={{ marginTop: 16 }}>
              <List
                size="small"
                dataSource={comparisonData.improvements}
                renderItem={(item) => (
                  <List.Item>
                    <Space>
                      <CheckCircleOutlined style={{ color: '#52c41a' }} />
                      <span>{item}</span>
                    </Space>
                  </List.Item>
                )}
              />
            </Card>
          )}

          {/* 退化项 */}
          {comparisonData.degradations.length > 0 && (
            <Card title="需注意" size="small" style={{ marginTop: 16 }}>
              <List
                size="small"
                dataSource={comparisonData.degradations}
                renderItem={(item) => (
                  <List.Item>
                    <Space>
                      <ArrowDownOutlined style={{ color: '#faad14' }} />
                      <span>{item}</span>
                    </Space>
                  </List.Item>
                )}
              />
            </Card>
          )}

          {/* 内容预览 */}
          <Card title="内容预览" size="small" style={{ marginTop: 16 }}>
            <Row gutter={16}>
              <Col span={12}>
                <div className="content-preview">
                  <h4>原文</h4>
                  <div className="preview-text">
                    {originalContent.slice(0, 300)}
                    {originalContent.length > 300 && '...'}
                  </div>
                </div>
              </Col>

              <Col span={12}>
                <div className="content-preview">
                  <h4>优化后</h4>
                  <div className="preview-text optimized-text">
                    {selectedVersion.content.slice(0, 300)}
                    {selectedVersion.content.length > 300 && '...'}
                  </div>
                </div>
              </Col>
            </Row>
          </Card>
        </>
      )}
    </div>
  );
};
